<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <!-- <el-form-item label="Id">
        <el-input v-model="form.id" :disabled="true" />
      </el-form-item> -->
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>

      <Tree :id="id" ref="tree" :isfullscreen="isFullScreen" @getCategoryId="getCategoryId" />

      <MarkdownEditor :id="id" ref="md" :content="form.content" @handleFullScreen="handleFullScreen" @getContent="getContent" />

      <!-- {{ testName }} -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { info, edit } from '@/api/article'
// import { getCategory } from '@/api/articleCategory'

import MarkdownEditor from '@/components/MarkdownEditor/index'
import Tree from '@/components/Tree/index'

// import { mapGetters } from 'vuex'

export default {
  // state: {
  //   wxc: 'wxc01'
  // },
  // mutations: {
  //   setWxc(state, data) {
  //     state.wxc = data
  //   }
  // },
  name: 'ArticleEdit',
  components: {
    // mavonEditor,
    // treeselect,
    MarkdownEditor,
    Tree
  },
  data() {
    var validateCategory = (rule, value, callback) => {
      if (value > 0) {
        callback()
      }
      return callback(new Error('请选择分类'))
    }

    return {
      id: 0,
      isFullScreen: false,
      form: {
        id: 0,
        title: '',
        categoryId: null,
        categoryName: null,
        content: ''
      },

      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, validator: validateCategory, trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    // console.log('store:')
    // console.log(this.$store.getters.avatar)
    // this.$store.dispatch('test/setName', 'name1111111').then(() => {
    //   console.log('test setName ok!')
    // }).catch((res) => {
    //   console.log(res.message)
    // })

    // this.$store.dispatch('test/reset', 'name1111111').then(() => {
    //   console.log('test reset ok!')
    // }).catch((res) => {
    //   console.log(res.message)
    // })

    // console.log(this.$store.getters.testName)
    this.id = this.$route.params.id
    this.fetchData()
  },
  // eslint-disable-next-line vue/order-in-components
  // computed: {
  //   ...mapGetters([
  //     'testName'
  //   ])
  // },
  methods: {
    fetchData() {
      info(this.id).then(response => {
        this.form = response.data
        this.$refs.md.setMdContent(this.form.content)
        this.$refs.tree.setCategoryId(this.form.categoryId)
      })
      // getCategory().then(response => {
      //   // this.category = response.data
      //   this.$refs.tree.setOptions(response.data)
      //   // this.treeOptions = this.recursiveTree(this.category)
      // })
    },
    getContent(val) {
      this.form.content = val
    },
    getCategoryId(val) {
      this.form.categoryId = val
    },
    handleFullScreen(isFullScreen) {
      console.log('全屏')
      this.isFullScreen = isFullScreen
    },
    onSubmit(formName) {
      console.log(this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            'id': this.form.id,
            'title': this.form.title,
            'content': this.form.content,
            'category_id': this.form.categoryId
          }
          console.log(params)
          edit(params).then(response => {
            if (response.code === 0) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
              this.fetchData()
              // this.list.splice(row._source.id, 1)
            } else {
              console.log(response.message)
              this.$notify.error({
                title: '错误',
                message: response.message,
                duration: 2000
              })
            }
          })
        } else {
          return false
        }
      })
    }

  }
}
</script>

<style scoped>

</style>

